<template>
  <!-- <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link
      :to="{ name: 'Page2', params: { id: 1234 }, query: { debug: true } }"
      >Navigate to Page2</router-link
    >
  </div> -->

  <div>
    <el-link type="primary" @click="lianjie()">小小链接</el-link>
    <el-button type="danger" @click="deletelist">批量删除</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="artName" label="美术馆名称" width="180" />
      <el-table-column prop="artUrl" label="美术馆默认图片" width="180">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.artUrl"
          />
        </template>
      </el-table-column>
      <el-table-column prop="artUptime" label="美术馆开放时间" width="180" />
      <el-table-column prop="artDowntime" label="美术馆闭馆时间" width="180" />
      <el-table-column
        prop="artIntroduction"
        label="美术馆基本介绍"
        width="180"
      />
      <el-table-column prop="artVisitors" label="美术馆参观须知" width="180" />
      <el-table-column label="操作">
        <el-button plain @click="dialogFormVisible = true">
          修改图片
        </el-button>
        <el-button type="primary" @click="jiluList()">当天预约记录</el-button>
        <el-button type="primary" @click="order()">预约</el-button>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogFormVisible" title="请输入修改后的图片" width="500">
    <el-upload
      class="avatar-uploader"
      action="http://127.0.0.1:10010/art/art/imageup"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </el-dialog>
  <el-dialog v-model="jiluLists" title="当天预约记录" width="500">
    <el-table :data="JiluListData" style="width: 100%">
      <el-table-column prop="recordNum" label="预约人数" width="180" />
      <el-table-column prop="recordTime" label="时间" width="180" />
      <el-table-column prop="recordDate" label="参观日期" width="180" />
    </el-table>
  </el-dialog>
  <el-dialog v-model="ordervalue" title="预约" width="500">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="请选择预约时间">
        <el-select
          v-model="yvyue.orderId"
          placeholder="请选择预约时间"
          @change="checknum"
        >
          <el-option label="8:00~11:30" value="1" />
          <el-option label="14:00~17:30" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="预约人信息">
        <el-input v-model="yvyue.user" clearable />
      </el-form-item>
      <el-form-item label="同行人人数">
        <el-input v-model="yvyue.orderPlaces" clearable />
      </el-form-item>
    </el-form>
    <el-button type="primary" :disabled="checkssss" @click="getyvyue()"
      >预约</el-button
    >
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { GetArt, JiLu, checknums, yvyues, DeleteListsss } from "@/api/api";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

const imageUrl = ref("");
const tableData = ref([]);
const form = ref({});

const yvyue = ref({});

const dialogFormVisible = ref(false);
const jiluLists = ref(false);
const ordervalue = ref(false);
const JiluListData = ref([]);
const checkssss = ref(true);
const yvyuevalue = ref({});
const DeleteList = ref([]);

/**
 * 多选数据
 */
import type { TableInstance } from "element-plus";
const multipleTableRef = ref<TableInstance>();
const multipleSelection = ref<any>([]);
const toggleSelection = (rows?: any, ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      );
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  console.log(multipleSelection.value);
};
const listid = ref([]);
//批删除
const deletelist = () => {
  listid.value = [];
  multipleSelection.value.forEach((sss) => {
    listid.value.push(sss.artId + 0);
  });
  DeleteListsss(listid.value).then((res) => {});
};

/**
 * 链接
 */
const id = ref(1);
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const lianjie = () => {
  router.push({
    path: "/home/test",
    query: {
      context: "asdfas",
    },
  });
};

/**
 * 预约可行性判定
 */
const getyvyue = () => {
  yvyues(yvyue.value).then((res) => {
    console.log(res);
    if (res.data.code == 200) {
      ElMessage.success("预约成功");
      ordervalue.value = false;
      jiluList();
    } else {
      ElMessage.error("票数不够");
    }
  });
};

/**
 * 查询剩余票数
 */
const checknum = () => {
  checknums(yvyue.value).then((res) => {
    console.log(res);
    yvyuevalue.value = res.data.data;
    if (res.data.data.orderPlaces <= 0) {
      checkssss.value = true;
    } else {
      checkssss.value = false;
    }
  });
};

/**
 * 预约
 */
const order = () => {
  ordervalue.value = true;
};

/**
 * 获取当天预约记录
 */
const jiluList = () => {
  JiLu().then((res) => {
    console.log(res);
    jiluLists.value = true;
    JiluListData.value = res.data.data;
  });
};
const upimage = () => {};

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  console.log(response);
  form.value = response.data;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

//获取美术馆列表
const getArt = () => {
  GetArt().then((res) => {
    console.log(res);
    tableData.value = res.data.data;
  });
};

onMounted(() => {
  getArt();
});
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
